<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>
        HIUI 前端页面框架 - 基础说明
    </title>
    <meta content="width=device-width, initial-scale=1.0, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0 " name="viewport">
    <meta content="yes" name="apple-mobile-web-app-capable">
    <meta content="black" name="apple-mobile-web-app-status-bar-style">
    <meta content="telephone=no" name="format-detection">
    <link rel="stylesheet" type="text/css" href="../../styles/hiui.css">
    <link rel="stylesheet" type="text/css" href="../../styles/site.css">

<body>
    <% var navName = 'base'; %>
    <%- include('../_parts/_header') %>
    <div class="site-container">
        <div class="site-tree">
            <%- include('../_parts/_nav') %>
        </div>
        <div class="site-content">
            <h3 class="site-title">Normalize 排版<a name="normalize">#</a></h3>
             <%- include('../_parts/modules/_normalize')%>
            <h3 class="site-title">Grid 栅格系统<a name="grid">#</a></h3>
            <%- include('../_parts/modules/_grid')%>
            <h3 class="site-title">Layout 布局<a name="layout">#</a></h3>
            <%- include('../_parts/modules/_layout')%>
            <h3 class="site-title">Font 字体图标<a name="font">#</a></h3>
            <%- include('../_parts/modules/_fonts')%>
            <h3 class="site-title">Color 主题颜色<a name="color">#</a></h3>
            <%- include('../_parts/modules/_color')%>
            <h3 class="site-title">Button 按钮<a name="button">#</a></h3>
            <%- include('../_parts/modules/_btn')%>
            <h3 class="site-title">Link 链接<a name="link">#</a></h3>
            <div class="site-info">
                <p>基础用法</p>
                <a href="javascript:;">默认链接</a>
                <a href="javascript:;" class="link-primary">主要链接</a>
                <a href="javascript:;" class="link-info">信息链接</a>
                <a href="javascript:;" class="link-success">成功链接</a>
                <a href="javascript:;" class="link-warning">警告链接</a>
                <a href="javascript:;" class="link-danger">危险链接</a>
                <p>下划线</p>
                <a href="javascript:;" class="link-underline">默认链接</a>
                <a href="javascript:;" class="link-primary link-underline">主要链接</a>
                <a href="javascript:;" class="link-info link-underline">信息链接</a>
                <a href="javascript:;" class="link-success link-underline">成功链接</a>
                <a href="javascript:;" class="link-warning link-underline">警告链接</a>
                <a href="javascript:;" class="link-danger link-underline">危险链接</a>
                <p>禁用</p>
                <a href="javascript:;" class="link-disabled">默认链接</a>
                <a href="javascript:;" class="link-primary link-disabled">主要链接</a>
                <a href="javascript:;" class="link-info link-disabled">信息链接</a>
                <a href="javascript:;" class="link-success link-disabled">成功链接</a>
                <a href="javascript:;" class="link-warning link-disabled">警告链接</a>
                <a href="javascript:;" class="link-danger link-disabled">危险链接</a>
            </div>
            <h3 class="site-title">Animation 动画<a name="animation">#</a></h3>
            <%- include('../_parts/modules/_animation')%>
            <h3 class="site-title">纯CSS Loading动画<a name="loading">#</a></h3>
            <%- include('../_parts/modules/_loading')%>
            <h3 class="site-title">Assist 辅助<a name="assist">#</a></h3>
            <h4 class="site-subtitle">1. 文档布局</h4>
            <div class="site-info">
                 <table class="site-table">
                    <tbody>
                        <tr>
                            <td>
                                <div class="table-cell">
                                    向右浮动<code>.pull-right</code>
                                </div>
                            </td>
                        </tr>
                        <tr>
                            <td>
                                <div class="table-cell">
                                    向左浮动<code>.pull-left</code>
                                </div>
                            </td>
                        </tr>
                        <tr>
                            <td>
                                <div class="table-cell">
                                    清除浮动<code>.clearfix</code>
                                </div>
                            </td>
                        </tr>
                        <tr>
                            <td>
                                <div class="table-cell">
                                    文本左对齐<code>.text-left</code>
                                </div>
                            </td>
                        </tr>
                        <tr>
                            <td>
                                <div class="table-cell">
                                    文本右对齐<code>.text-right</code>
                                </div>
                            </td>
                        </tr>
                        <tr>
                            <td>
                                <div class="table-cell">
                                    文本居中对齐<code>.text-center</code>
                                </div>
                            </td>
                        </tr>
                        <tr>
                            <td>
                                <div class="table-cell">
                                    文本单行截取<code>.text-cut</code>
                                </div>
                            </td>
                        </tr>
                        <tr>
                            <td>
                                <div class="table-cell">
                                    隐藏<code>.hide</code>
                                </div>
                            </td>
                        </tr>
                        <tr>
                            <td>
                                <div class="table-cell">
                                    显示<code>.show</code>
                                </div>
                            </td>
                        </tr>
                        <tr>
                            <td>
                                <div class="table-cell">
                                    文本色 <code>.text-${type}</code>
                                </div>
                            </td>
                        </tr>
                        <tr>
                            <td>
                                <div class="table-cell">
                                    背景色 <code>.bg-${type}</code>
                                </div>
                            </td>
                        </tr>
                    </tbody>
                </table>
            </div>
            <%- include('../_parts/_footer')%>
        </div>
    </div>
    <script type="text/javascript" src="../../scripts/vendor.js"></script>
    <script type="text/javascript" src="../../scripts/site.js"></script>
</body>

</html>